@use 'sass:map';
// {bem_b,bem_e,bem_m,VueAndNvueStyleAttr,when}
@use './mixin/mixins.scss' as *;
@use './mixin/function.scss' as *;
// // {$badge}
@use './common/var.scss' as *;

@import 'common/index.scss';

@include bem_b(skeleton-tabbar) {
	@include flex(column);
	flex: 1;
	justify-content: center;
	@include bem_e(content) {
		@include flex;
		@include VueAndNvueStyleAttr('background-color','skeleton', 'bg-color');

		&__item {
			flex: 1;
			height: 50px;
			@include flex(column);
			align-items: center;
			justify-content: center;
			&-icon {
				overflow:hidden;
				margin-bottom: 5px;
				&--circle {
					@include VueAndNvueStyleAttr('border-radius','skeleton', 'tabbar-icon-circle');
				}
				&__block{
					width: 24px;
					height: 24px;
				}
			}
			&-text {
				@include flex;
				&__block{
					width: 24px;
					height: 4px;
				}
			}
			&--bulge {
				transform: translateY(-16px);
				.e-skeleton-tabbar__content__item-icon {
					width: 40px;
					height: 40px;
				}
				.e-skeleton-tabbar__content__item-text {
					width: 40px;
				}
			}
		}
	}
	@include bem_e(placeholder) {
		height: 50px;
		@include bem_m(bulge) {
			height: 66px;
		}
	}
	@include bem_m(fixed) {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
}
